Перейти к основному содержимому

Проверка пользовательского сценария

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ
Тестировщику Разработчику Аналитику

Проверка пользовательского сценария​

Этот практикум посвящен формированию навыка проверки системы глазами конечного пользователя. Тестирование не ограничивается поиском ошибок в коде, оно требует понимания того, как человек взаимодействует с интерфейсом для достижения своей цели.

В рамках этого материала мы создадим простую веб-форму регистрации, протестируем её функциональность вручную, напишем автоматизированный скрипт на базе Selenium и реализуем полный сквозной (End-to-End) сценарий, включающий регистрацию и добавление товара в корзину.

Создание формы регистрации​

Первым шагом является создание базовой веб-страницы, имитирующей процесс регистрации пользователя. Форма должна содержать поля для ввода имени, адреса электронной почты и пароля, а также кнопку отправки данных.

Создайте файл index.html со следующим содержимым:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Регистрация</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; box-sizing: border-box; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        .error { color: red; font-size: 0.9em; display: none; }
        .success { color: green; font-size: 1.1em; display: none; margin-top: 10px; }
    </style>
</head>
<body>
    <h1>Регистрация</h1>
    <form id="registrationForm">
        <div class="form-group">
            <label for="name">Имя:</label>
            <input type="text" id="name" name="name" required>
            <div class="error" id="errorName">Поле имя обязательно для заполнения.</div>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="text" id="email" name="email" required>
            <div class="error" id="errorEmail">Введите корректный адрес электронной почты.</div>
        </div>
        <div class="form-group">
            <label for="password">Пароль:</label>
            <input type="password" id="password" name="password" required>
            <div class="error" id="errorPassword">Пароль должен содержать минимум 6 символов.</div>
        </div>
        <button type="submit">Зарегистрироваться</button>
    </form>
    <div class="success" id="successMessage">Успешная регистрация! Переход к корзине...</div>

    <script>
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            
            let isValid = true;

            // Сброс ошибок
            document.querySelectorAll('.error').forEach(el => el.style.display = 'none');
            document.getElementById('successMessage').style.display = 'none';

            if (!name) {
                document.getElementById('errorName').style.display = 'block';
                isValid = false;
            }
            if (!email || !email.includes('@') || !email.includes('.')) {
                document.getElementById('errorEmail').style.display = 'block';
                isValid = false;
            }
            if (password.length < 6) {
                document.getElementById('errorPassword').style.display = 'block';
                isValid = false;
            }

            if (isValid) {
                document.getElementById('successMessage').style.display = 'block';
                // Имитация перехода к корзине через 2 секунды
                setTimeout(() => {
                    alert("Переход в корзину...");
                    // Очистка данных после успешной регистрации
                    document.getElementById('registrationForm').reset();
                }, 2000);
            }
        });
    </script>
</body>
</html>

Для запуска страницы откройте файл index.html в любом современном браузере. Этот код содержит базовую логику валидации на стороне клиента, которую мы будем тестировать.

Функциональное тестирование интерфейса​

Функциональное тестирование проверяет соответствие поведения системы заявленным требованиям. На этом этапе тестировщик выступает в роли пользователя, который выполняет действия через графический интерфейс без доступа к внутреннему коду или базе данных.

Требования к форме​

Форма регистрации должна удовлетворять следующим условиям:

  1. Поле "Имя" является обязательным. Система не принимает пустое значение.
  2. Поле "Email" должно соответствовать формату электронной почты (наличие символа @ и доменной зоны).
  3. Поле "Пароль" должно содержать не менее шести символов.
  4. При успешном заполнении всех полей система выводит сообщение об успехе и очищает форму.
  5. При наличии ошибок система подсвечивает конкретное поле и выводит текстовое описание проблемы.

Составление чек-листа действий​

Чек-лист представляет собой структурированный список шагов, которые необходимо выполнить для проверки работоспособности системы. Ниже приведен пример чек-листа для данной формы.

№ДействиеОжидаемый результатСтатус
1Оставить все поля пустыми и нажать кнопкуПоявляются сообщения об ошибках для всех трех полейВыполнено
2Заполнить только поле "Имя", остальные оставить пустымиСообщения об ошибках появляются для Email и ПароляВыполнено
3Заполнить имя и пароль, ввести Email без символа @Сообщение об ошибке появляется только для EmailВыполнено
4Заполнить имя и email, ввести пароль из 4 символовСообщение об ошибке появляется для ПароляВыполнено
5Заполнить все поля корректными даннымиПоявляется зеленое сообщение об успехе, форма очищаетсяВыполнено
6Ввести длинное имя (более 50 символов)Данные принимаются, ограничений нет (или есть ограничение, если задано)Выполнено
7Нажать кнопку без ввода данныхСистема блокирует отправку и показывает ошибкиВыполнено

Ручное тестирование​

Процесс ручного тестирования начинается с открытия страницы в браузере. Тестировщик последовательно выполняет шаги из чек-листа.

Сценарий 1: Ввод невалидных данных Запустите страницу. Оставьте все поля пустыми. Нажмите кнопку "Зарегистрироваться". Ожидаемый результат — появление красных сообщений под каждым полем. Это подтверждает работу клиентской валидации. Если сообщение не появилось, это критическая ошибка.

Сценарий 2: Ввод неправильного формата Email Введите имя "Иван", пароль "123456". В поле Email введите текст "ivanexample.com". Нажмите кнопку. Система должна выделить ошибку именно в поле Email, игнорируя другие поля. Это демонстрирует точность работы алгоритма проверки формата.

Сценарий 3: Ввод валидных данных Введите имя "Анна", Email "anna@test.ru", Пароль "secret1". Нажмите кнопку. Через мгновение должно появиться зеленое сообщение "Успешная регистрация!". Через две секунды система должна имитировать переход в корзину и очистить поля формы. Это подтверждает положительный сценарий использования.

Если на каком-либо этапе поведение системы отличается от ожидаемого, тестировщик фиксирует дефект, описывает шаги воспроизведения и прикладывает скриншоты.

Автоматизация UI с помощью Selenium​

Автоматизация тестирования позволяет повторять рутинные операции без участия человека, что экономит время и снижает вероятность человеческой ошибки. Для автоматизации взаимодействия с браузером используется библиотека Selenium WebDriver.

Установка окружения​

Для работы с Selenium требуется установить Python и саму библиотеку. Также необходим драйвер для конкретного браузера. В данном примере используется Google Chrome.

Установите необходимые пакеты через терминал:

pip install selenium webdriver-manager

Скачайте драйвер ChromeDriver, соответствующий версии вашего браузера, или используйте менеджер драйверов, который автоматически подбирает нужную версию.

Написание скрипта автоматизации​

Скрипт открывает браузер, переходит на страницу регистрации, заполняет поля и проверяет наличие сообщений об ошибках.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager
import time

def test_registration_form():
    options = webdriver.ChromeOptions()
    options.add_argument("--headless") # Запуск в фоновом режиме
    
    driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)
    
    try:
        # Открытие сайта
        driver.get("file:///C:/path/to/index.html") # Укажите путь к вашему файлу
        
        wait = WebDriverWait(driver, 10)
        
        # Поиск элементов
        name_field = driver.find_element(By.ID, "name")
        email_field = driver.find_element(By.ID, "email")
        password_field = driver.find_element(By.ID, "password")
        submit_button = driver.find_element(By.CSS_SELECTOR, "button[type='submit']")
        
        # Заполнение невалидными данными
        name_field.clear()
        email_field.clear()
        password_field.clear()
        
        email_field.send_keys("invalid-email")
        password_field.send_keys("123")
        
        submit_button.click()
        
        # Ожидание появления элемента ошибки
        error_email = wait.until(EC.visibility_of_element_located((By.ID, "errorEmail")))
        
        # Проверка текста ошибки
        assert "корректный адрес" in error_email.text.lower(), "Ошибка формата email не отображена"
        
        print("Тест пройден: проверка невалидного email выполнена успешно.")
        
    except Exception as e:
        print(f"Ошибка при выполнении теста: {e}")
    finally:
        driver.quit()

if __name__ == "__main__":
    test_registration_form()

В этом скрипте используются следующие ключевые компоненты:

  • WebDriverWait обеспечивает ожидание появления элементов на странице, что критично для динамических сайтов.
  • find_element ищут элементы по идентификатору, классу или другим атрибутам.
  • send_keys имитирует ввод текста пользователем.
  • click эмулирует нажатие кнопки мышью.
  • Блок try...finally гарантирует закрытие браузера даже при возникновении ошибки.

Обработка исключений позволяет программе не падать резко, а выводить понятное сообщение о причине сбоя. Это упрощает отладку автотестов.

End-to-End (сквозное) тестирование​

End-to-End тестирование проверяет полную цепочку взаимодействия пользователя с системой. Цель состоит в том, чтобы убедиться, что все модули системы работают согласованно при реальном использовании. В нашем случае это процесс от регистрации до добавления товара в корзину.

Полный сценарий​

Сценарий включает следующие этапы:

  1. Пользователь проходит процедуру регистрации.
  2. После успешной регистрации система перенаправляет его на главную страницу магазина.
  3. Пользователь выбирает товар и добавляет его в корзину.
  4. Система отображает подтверждение добавления товара.
  5. Корзина обновляется с учетом нового товара.
  6. Данные временной сессии очищаются для подготовки к следующему прогону.

Реализация сценария в коде​

Ниже представлен расширенный скрипт, объединяющий проверку регистрации и имитацию перехода к корзине. Поскольку реальный бэкенд отсутствует, мы симулируем переход через JavaScript событие или изменение URL.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager
import time

def run_e2e_scenario():
    driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))
    
    try:
        # Шаг 1: Регистрация
        driver.get("file:///C:/path/to/index.html")
        
        name_field = driver.find_element(By.ID, "name")
        email_field = driver.find_element(By.ID, "email")
        password_field = driver.find_element(By.ID, "password")
        submit_button = driver.find_element(By.CSS_SELECTOR, "button[type='submit']")
        
        name_field.send_keys("TestUser")
        email_field.send_keys("testuser@example.com")
        password_field.send_keys("securepass")
        
        submit_button.click()
        
        # Ожидание сообщения об успехе
        success_msg = WebDriverWait(driver, 10).until(
            EC.visibility_of_element_located((By.ID, "successMessage"))
        )
        assert "Успешная регистрация" in success_msg.text
        
        # Шаг 2: Имитация перехода в корзину
        # В реальности здесь происходит редирект на другую страницу
        # Здесь мы просто проверяем, что форма очистилась
        time.sleep(2) # Ждем имитацию перехода
        
        # Проверка очистки формы
        assert name_field.get_attribute("value") == ""
        assert email_field.get_attribute("value") == ""
        assert password_field.get_attribute("value") == ""
        
        print("Сценарий E2E завершен: регистрация прошла успешно, данные очищены.")
        
        # Добавление товара в корзину (симуляция)
        # Представим, что мы уже на странице магазина
        driver.get("file:///C:/path/to/cart.html") # Допустим, такой файл существует
        
        add_to_cart_btn = driver.find_element(By.CLASS_NAME, "add-to-cart-btn")
        add_to_cart_btn.click()
        
        confirmation = driver.find_element(By.CLASS_NAME, "cart-confirm")
        assert "Товар добавлен" in confirmation.text
        
        print("Товар добавлен в корзину успешно.")
        
    except Exception as e:
        print(f"Ошибка E2E сценария: {e}")
        # Сохранение скриншота для анализа
        driver.save_screenshot("e2e_error.png")
    finally:
        driver.quit()

if __name__ == "__main__":
    run_e2e_scenario()

Очистка данных​

Важным аспектом сквозного тестирования является изоляция тестовых прогонов. После завершения каждого сценария необходимо гарантировать, что состояние системы возвращается к исходному. Это достигается путем:

  • Очистки полей ввода.
  • Удаления созданных тестовых записей из базы данных (если она доступна).
  • Закрытия всех открытых вкладок и завершения процесса браузера.

В реальном проекте очистка данных часто выполняется через API или транзакции базы данных, которые откатывают изменения после теста. В нашем примере мы используем метод .reset() формы и явное закрытие драйвера.

Освоение главы0%